<template>
  <div class="admin-container">
    <el-container class="layout-container">
      <!-- 侧边栏 -->
      <AppSidebar 
        :active-tab="activeTab"
        @menu-select="handleMenuSelect"
      />

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <!-- 全局加载状态 -->
        <div v-if="loading.global" class="loading-container" v-loading="true" element-loading-text="加载中...">
        </div>
        
        <!-- 内容插槽 -->
        <slot />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import AppSidebar from './AppSidebar.vue'

// Props
const props = defineProps({
  activeTab: {
    type: String,
    required: true
  },
  loading: {
    type: Object,
    default: () => ({ global: false })
  }
})

// Events
const emit = defineEmits(['menu-select'])

// 菜单选择处理
const handleMenuSelect = (key) => {
  emit('menu-select', key)
}
</script>

<style scoped>
.admin-container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  margin: 0;
  padding: 0;
}

.layout-container {
  height: 100%;
  width: 100%;
}

.main-content {
  padding: 0;
  background: transparent;
  overflow-y: auto;
  position: relative;
  height: 100%;
  width: calc(100vw - 250px);
  max-width: calc(100vw - 250px);
}

.loading-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}

/* 全局滚动条样式 */
.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.main-content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 8px;
}

.main-content::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}
</style>